<template>
  <div>
    <div class="text-box">
      <div>电站名称</div>
      <div>{{ dataSource.stationName }}</div>
    </div>
    <div class="title">上传信息</div>
    <div v-for="(item, index) in dataSource.updateRecord" :key="index">
      <!-- 图片 -->
      <template v-if="item.fieldName.indexOf('Img') > -1">
        <div class="small-title">{{ item.name }}</div>
        <div class="img-box">
          <template
            v-if="imageObj[`imageOldList${item.fieldName}`] && imageObj[`imageOldList${item.fieldName}`].length"
          >
            <img class="one-img" v-for="(it, inx) in imageObj[`imageOldList${item.fieldName}`]" :key="inx" :src="it" />
          </template>
          <template v-else>
            <div class="my-img">无</div>
          </template>
          <img class="jiantou" src="@/assets/home/you.png" />
          <img class="one-img" v-for="(it, inx) in imageObj[`imageNewList${item.fieldName}`]" :key="inx" :src="it" />
        </div>
      </template>
      <!-- 富文本 -->
      <template
        v-else-if="
          [
            'materialSource',
            'damLevelConfig',
            'testParam',
            'simulationParam',
            'slopeStabilityResult',
            'staticForceResult',
            'powerResult'
          ].includes(item.fieldName)
        "
      >
        <div class="small-title">{{ item.name }}</div>
        <div class="flex-box">
          <div class="text-box editor-box">
            <div v-if="item.oldFieldVal" class="right-text editor-width">
              <Editor :isLook="true" :value.sync="item.oldFieldVal" />
            </div>
            <div class="right-text" v-else>无</div>
          </div>
          <img src="@/assets/home/you.png" />

          <div class="text-box editor-box">
            <div class="right-text editor-width">
              <Editor :isLook="true" :value.sync="item.fieldVal" />
            </div>
          </div>
        </div>
      </template>
      <!-- 文字 -->
      <template v-else>
        <div class="small-title">{{ item.name }}</div>
        <div class="flex-box">
          <div class="text-box">
            <div class="left-text">{{ item.name }}</div>
            <div class="right-text">{{ item.oldFieldVal || '无' }}</div>
          </div>
          <img src="@/assets/home/you.png" />

          <div class="text-box">
            <div class="left-text">{{ item.name }}</div>
            <div class="right-text">{{ item.fieldVal }}</div>
          </div>
        </div>
      </template>
    </div>

    <div class="title">{{ '审核意见' + (!isLook ? '（必填）' : '') }}</div>
    <a-radio-group v-model="value" v-if="!isLook">
      <a-radio :value="2"> 通过 </a-radio>
      <a-radio :value="3"> 不通过 </a-radio>
    </a-radio-group>
    <div v-else>
      <div v-if="dataSource.applyStatus == 2">审核通过</div>
      <div v-else-if="dataSource.applyStatus == 3">审核不通过</div>
      <div v-else-if="dataSource.applyStatus == 1">待审核</div>
    </div>
    <div class="textarea" v-if="!isLook && value == 3">
      <a-textarea v-model="reason" placeholder="不通过原因" :auto-size="{ minRows: 3, maxRows: 5 }" />
    </div>
    <div v-else-if="dataSource.applyStatus == 3">
      <a-textarea v-model="reason" :disabled="true" placeholder="不通过原因" :auto-size="{ minRows: 3, maxRows: 5 }" />
    </div>

    <a-divider></a-divider>
    <div class="mybtn">
      <a-button class="cancel" @click="cancel">取消</a-button>
      <a-button type="primary" v-if="!isLook" @click="sumbit"> 确认 </a-button>
    </div>
  </div>
</template>

<script>
import { readFile, checkDamInfo } from '@/api/user.js';
import Editor from '@/views/components/editor';

export default {
  components: { Editor },
  props: {
    dataSource: {
      type: Object,
      default: {}
    },
    isLook: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: '',
      reason: '',
      imageObj: {}
    };
  },
  watch: {
    dataSource() {
      this.setImg();
    }
  },
  mounted() {
    this.setImg();
  },
  methods: {
    setImg() {
      this.dataSource.updateRecord.map(item => {
        if (item.fieldName.indexOf('Img') >= 0) {
          if (item.oldFieldVal && item.oldFieldVal != '') {
            let arr = [];
            item.oldFieldVal.split(',').map(it => {
              arr.push(it);
            });
            console.log('111', arr);
            this.$set(this.imageObj, `imageOldList${item.fieldName}`, arr);
          }
          if (item.fieldVal && item.fieldVal != '') {
            let arr = [];
            item.fieldVal.split(',').map(it => {
              arr.push(it);
            });
            this.$set(this.imageObj, `imageNewList${item.fieldName}`, arr);
          }
        }
      });
      this.value = this.dataSource.applyStatus;
      this.reason = this.dataSource.reason;
    },
    cancel() {
      this.$emit('cancel');
    },
    sumbit() {
      if (this.value == '' || this.value == 1) {
        this.$message.info('请做出对应审核意见');
        return;
      }
      const params = {
        id: this.dataSource.id,
        damId: this.dataSource.damId,
        applyStatus: this.value,
        reason: this.reason
      };
      checkDamInfo(params).then(res => {
        if (res.code == 0) {
          this.$message.success('审核成功');
          this.$emit('cancel', true);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.ant-radio-wrapper {
  color: #fff;
  margin-right: 100px;
}
.text-box {
  width: 40%;
  min-height: 48px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(22, 102, 240, 0.2);

  .left-text {
    min-width: 100px;
  }
  .right-text {
    word-wrap: break-word;
    word-break: break-all;
  }
  .editor-width {
    width: 100%;
  }
  .editor-width ::v-deep .w-e-toolbar {
    display: none;
  }
}
.editor-box {
  width: 45%;
}
.title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  margin-top: 24px;
}
.small-title {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 4px;
}
.flex-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  img {
    width: 32px;
    height: 32px;
  }
}
.img-box {
  width: 35%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;

  .one-img {
    width: 70px;
    height: 70px;
    margin-right: 20px;
    min-width: 70px;
  }
  .my-img {
    width: 70px;
    height: 70px;
    margin-right: 20px;
    min-width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .jiantou {
    width: 32px;
    height: 32px;
  }
}
.textarea {
  margin-top: 16px;
}
.mybtn {
  display: flex;
  justify-content: center;
  align-items: center;
  .cancel {
    margin-right: 20px;
    color: #fff;
    background: rgba(22, 102, 240, 0.2);
    border-color: rgba(22, 102, 240, 0.2);
  }
}
</style>
